<template>
  <div
    class="_flex-y _abs-c-two win-box _cart"
    :class="{ 'win-box-full': isFull }"
    ref="win-box"
  >
    <div
      class="_flex _background-1 _wrapper-x _p5 _over-hidden"
      ref="win-box-title"
    >
      <div class="title">{{ title }}</div>
      <div class="_flex _flex-space-x">
        <div @click="$emit('hidden')">
          <el-icon>
            <Minus />
          </el-icon>
        </div>
        <div @click="isFull = !isFull">
          <el-icon :class="{ active: isFull }">
            <FullScreen />
          </el-icon>
        </div>
        <div @click="$emit('close')">
          <el-icon>
            <Close />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="_flex-item-1 _wrapper _over-hidden" style="height: 500px">
      <div class="_wrapper _box-scroll _over-scroll-hidden _over-hidden _rel">
        <template v-if="comComponent">
          <component
            :is="comComponent"
            ref="cusComponent"
            :winParam="param"
            @close="$emit('close')"
            @hidden="$emit('hidden')"
          />
        </template>
        <template v-else> 找不到对应功能，请重新尝试或者联系管理员！ </template>
      </div>
    </div>
  </div>
  <!--

    <div>

    </div>
   -->
</template>

<script>
import { markRaw } from "vue";
import toolDrag from "@/tool/tool-drag";
import toolRegex from "@/tool/tool-regex";
import ComIframe from "@/components/com-iframe/com-iframe.vue";
import FactoryComponent from "@/views/ai/factory-component.js";

export default {
  components: {
    ComIframe,
  },
  props: {
    title: {
      type: String,
      default: "窗口",
    },
    cusComponent: {
      type: Object,
      default: undefined,
    },
    content: {
      type: String,
      required: true,
    },
    param: {
      type: Object,
      required: false,
    },
    full: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // comComponent() {
    //   return FactoryComponent[this.content];
    // },
  },
  data() {
    return {
      isFull: this.full,
      comComponent: undefined,
    };
  },
  mounted() {
    toolDrag.drag(this.$refs["win-box-title"], {
      target: this.$refs["win-box"],
    });
    if (toolRegex.isHttpOrHttps(this.content)) {
      window.open(this.content, this.content, "noopener=yes,noreferrer=yes");
      this.$emit("close");
    } else {
      FactoryComponent[this.content]().then((res) => {
        this.comComponent = markRaw(res.default);
      });
    }
  },
};
</script>

<style scoped>
.win-box {
  width: 70%;
  height: 70%;
  overflow: hidden;
  z-index: 9;
}

.win-box-full {
  width: 100%;
  height: 100%;
}

.title {
  color: #fff;
}

.active {
  color: aqua;
}
</style>
